<template>

  <v-layout :title="title">
    <el-row type="flex" justify="center">
      <el-col :lg="12" :md="14" :sm="20" :xs="24">
        <v-form :form-title="formTitle" :form-data="formData" label-width="120px">
          <template slot="upload">
            <el-form-item label="图片上传">
              <el-upload
                :show-file-list="false"
                :auto-upload="false"
                :on-change="myUpload"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                class="avatar-uploader"
                action="action">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
              </el-upload>
            </el-form-item>
          </template>
        </v-form>
      </el-col>
    </el-row>

  </v-layout>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      formTitle: [
        {
          cn: 'id',
          en: 'id',
          disabled: true
        },
        {
          cn: '用户id',
          en: 'userid',
          disabled: true
        },
        {
          cn: '姓名',
          en: 'ddname',
          disabled: true
        },
        {
          cn: '电话',
          en: 'mobile',
          disabled: true
        },
        {
          cn: '头像',
          en: 'avatar',
          type: 'img',
          disabled: true
        },
        {
          cn: '部门',
          en: 'name',
          disabled: true
        },
        // {
        //     cn: '绑定用户',
        //     en: 'bind_user',
        //     type:'img',
        //     disabled:true,
        //     tips:'微信扫码绑定,如未关注该公众号,先扫码关注后再次扫码'
        // },
        {
          cn: '微信昵称',
          en: 'wx_nickname',
          disabled: true
        },
        {
          cn: '微信openid',
          en: 'wx_openid',
          disabled: true
        },
        {
          cn: '微信unionid',
          en: 'wx_unionid',
          disabled: true
        },
        {
          cn: '更新时间',
          en: 'update_at',
          disabled: true
        }

      ],
      formData: {}
    }
  },
  computed: {
    title() {
      // console.log(this.$route.meta.title);
      return this.$route.meta.title
    }
  },
  created() {
    const details = this.$route.params.details
    if (details) {
      localStorage.setItem('details', JSON.stringify(details))
    }
    this.formData = localStorage.getItem('details') ? JSON.parse(localStorage.getItem('details')) : {}
    this.$emit('childTitle', this.title)
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    myUpload(e) {
      this.imageUrl = e.url
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
